<template>
	<view class="detail-info">
		<!-- 商品标题价格 -->
		<view class="info-title">
			<view class="info-title-text">
				<view class="name">{{datailList.name}}</view>
				<view class="ename">{{datailList.enname}}</view>
			</view>
			<view class="info-title-price">¥{{datailList.price}}</view>
		</view>
		<!-- 商品规格 -->
		<view class="info-sugar" v-if="datailList.arrs[0]">
			<view class="sugar-desc">{{datailList.arrs[0].desc}}</view>
			<view class="sugar">
				<view class="sugar-item" v-for="(e,y) in datailList.arrs[0].arr" :key="y" @click="typeBtnA(e,y)"
				 :class="{'bgc' : currentIndexA == y }">
					{{e.title}}
				</view>
			</view>
		</view>
		<view class="info-sugar" v-if="datailList.arrs[1]" >
			<view class="sugar-desc">{{datailList.arrs[1].desc}}</view>
			<view class="sugar">
				<view class="sugar-item" v-for="(e,y) in datailList.arrs[1].arr" :key="y" @click="typeBtnB(e,y)"
				 :class="{'bgc' :currentIndexB == y } ">
					{{e.title}}
				</view>
			</view>
		</view>
		<view class="info-sugar"  v-if="datailList.arrs[2]" >
			<view class="sugar-desc">{{datailList.arrs[2].desc}}</view>
			<view class="sugar">
				<view class="sugar-item" v-for="(e,y) in datailList.arrs[2].arr" :key="y" @click="typeBtnC(e,y)"
				 :class="{'bgc' : currentIndexC == y } ">
					{{e.title}}
				</view>
			</view>
		</view>
		<view class="info-sugar"  v-if="datailList.arrs[3]">
			<view class="sugar-desc">{{datailList.arrs[3].desc}}</view>
			<view class="sugar">
				<view class="sugar-item" v-for="(e,y) in datailList.arrs[3].arr" :key="y" @click="typeBtnD(e,y)"
				 :class="{'bgc' :currentIndexD == y } ">
					{{e.title}}
				</view>
			</view>
		</view>
		<!-- 商品数量 -->
		<view class="info-count">
			<view class="countText">选择数量</view>
			<view class="changeCount">
				<button type="default" class="countBtn" @click="redCount">-</button>
				<view class="count-num" >{{count}}</view>
				<button type="default" class="countBtn" @click="addCount">+</button>
			</view>
		</view>
		<!-- 商品描述 -->
		<view class="info-desc">
			<view class="desc">商品描述</view>
			<view class="desc-content" v-for="(item,index) in datailList.desc" :key = "index">
				{{index+1}}.{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				currentIndexA:-1,
				currentIndexB:-1,
				currentIndexC:-1,
				currentIndexD:-1,
				count:1,
			}
		},
		props:{
			datailList:Object,
			// type:{
			// 	default(){
			// 		return {}
			// 	}
			// },
		},
		methods:{
			typeBtnA(e,y){
				this.currentIndexA = y
				let title =e.title
				// this.$set(this.type,teamDesc,title)
				this.$emit("titleA",title)
			},
			typeBtnB(e,y){
				this.currentIndexB = y
				let title =e.title
				// this.$set(this.type,teamDesc,title)
				this.$emit("titleB",title)
			},
			typeBtnC(e,y){
				this.currentIndexC = y
				let title =e.title
				// this.$set(this.type,teamDesc,title)
				this.$emit("titleC",title)
			},
			typeBtnD(e,y){
				this.currentIndexD = y
				let title =e.title
				// this.$set(this.type,teamDesc,title)
				this.$emit("titleD",title)
			},
			redCount(){
				if(this.count>1){
					this.count--
					this.$emit("changeCount",this.count)
				}
			},
			addCount(){
				this.count++
				this.$emit("changeCount",this.count)
			}
		}
	}
</script>

<style scoped>
	.detail-info{
		position: relative;
		top: -50rpx;
		border: 1rpx solid #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		background-color: #FFFFFF;
	}
	.info-title{
		display: flex;
		justify-content: space-between;
		margin: 40rpx;
	}
	.info-title-text>.name{
		font-size: 40rpx;
		color: #73746d;
		margin-bottom: 10rpx;
	}
	.info-title-text>.ename{
		color: #b7b8b8;
	}
	.info-title-price{
		color: #0c34ba;
		font-size: 40rpx;
	}
	.info-sugar{
		display: flex;
		font-size: 30rpx;
		width: 100%;
		height: 30rpx;
		margin-left: 40rpx;
		margin-top: 60rpx;
	}
	.info-tem{
		display: flex;
		font-size: 30rpx;
		width: 100%;
		height: 30rpx;
		margin-left: 40rpx;
	}
	.sugar-desc{
		line-height: 60rpx;
		width: 80rpx;
	}
	.sugar{
		display: flex;
		margin-left: 40rpx;
		text-align: center;
	}
	.sugar-item{
		width: 130rpx;
		height: 60rpx;
		background-color: #d0d1d1;
		margin-left: 30rpx;
		border-radius: 37%;
		line-height: 60rpx;
	}
	.bgc{
		background-color: #0c34ba;
		color: #FFFFFF;
	}
	.info-count{
		display: flex;
		justify-content: space-between;
		margin: 80rpx 40rpx 40rpx 40rpx;
		border-top:1rpx solid #b7b8b8;
		border-bottom:1rpx solid #b7b8b8;
		padding: 60rpx 0rpx 60rpx 0rpx;
		font-size: 30rpx;
		text-align: center;
	}
	.changeCount{
		display: flex;
	}
	.countBtn{
		width: 50rpx;
		height: 50rpx;
		border: 1rpx solid #b7b8b8;
		border-radius: 50%;
		padding: 0rpx 10rpx 30rpx 10rpx;
		line-height: 50rpx;
		/* font-size: 50rpx; */
		background-color: #FFFFFF;
	}
	.countBtn:hover{
		background-color:#0c34ba ;
		color: #FFFFFF;
	}
	.count-num{
		margin: 0rpx 40rpx 0rpx 40rpx;
	}
	.info-desc{
		margin: 0rpx 40rpx 80rpx 40rpx;
	}
	.desc{
		font-size: 30rpx;
	}
	.desc-content{
		margin-top: 40rpx;
		font-size: 20rpx;
		color: #b7b8b8;
	}
</style>
